<template>
    <view class="globe_back">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <view slot="top" class="p_24_32">
                <view>
                    <text :class="tabIndex === item.id ? 'active' : ''" :key="item.id" @click="setTab(item.id)" class="tabTitle" v-for="item in tabtitle">{{ item.name }}</text>
                </view>
            </view>
            <view class="p_32">
                <view class="flex flex_wrap mt_16">
                    <view v-for="item in list" style="width: 47%; margin: 12rpx 1.5%">
                        <view class="demo-layout back_fff br_16">
                            <image style="width: 100%" :src="item.goods_image" mode="widthFix"></image>
                            <text class="f_28 fw_bold title" style="padding: 24rpx 24rpx 0">{{ item.name }}</text>
                            <view class="flex justify_content_between p_16_24">
                                <view class="cl_FF6401 f_20">
                                    ￥
                                    <text class="f_32">{{ item.retail_price }}</text>
                                </view>
                                <view>
                                    <text class="cl_CCCED1 f_24">{{ item.is_on_sale_text }}</text>
                                    <u-icon name="star-fill" size="16" color="#FF6401"></u-icon>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import { goodsCollectList } from '@/api';

export default {
    data() {
        return {
            tabtitle: [
                { name: '全部', id: 0 },
                { name: '有效', id: 1 },
                { name: '已失效', id: 2 }
            ],
            tabIndex: 0,
            list: [],
			page:1,
			pagesize:10,
			status:'nomore',
        };
    },
    onLoad() {
        this.getList(1);
    },
	onReachBottom() {
	
	  if (this.page * this.pagesize > this.list.length) return;
	  this.status = "loading";
	  this.page = ++this.page;
	  setTimeout(() => {
	    this.getList(2);
	    if (this.page * this.pagesize > this.list.length)
	      this.status = "nomore";
	    else this.status = "loading";
	  }, 1000);
	},
    methods: {
        getList(i) {
           this.$.ajax(1,"POST","users/my_favorites",{
			   status:this.tabIndex
		   },(res)=>{
             if(res.code==200){
				 if(i==1){
				 	 this.list = res.data;
				 }else{
				 	 this.list = [...this.list, ...res.data];
				 }
           	    	
				 }else{
					this.$.ti_shi(res.msg);
				 }
			   })
			
        },
        setTab(id) {
            this.tabIndex = id;
			this.page=1;
            this.getList(1);
        },

    }
};
</script>

<style scoped lang="scss">
/deep/.u-icon {
    display: inline-block;
    display: inline-flex !important;
}
.title {
    display: inline-block;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tabTitle {
    margin-right: 48rpx;
    color: #999ca3;
}
.active {
    color: #3377ff;
    font-size: 32rpx;
    font-weight: bold;
}
</style>
